<template>
  <view class="list1" :class="{ 'horizontal': layout === 'horizontal' }">
    <view class="item" @tap="handleItemClick">
      <view v-if="isEdit" :class="{'checked': isSelected}" class="circle"></view>

      <view class="img">
        <su-image
          :current="0"
          :src="product.image"
          :width="layout == 'horizontal' ? 250 : 330"
          :height="layout == 'horizontal' ? 250 : 330"
          mode="scaleToFill"
        ></su-image>
      </view>
      <view class="text-area">
        <view class="title">{{ product.title }}</view>
        <view class="price-box">
          <view class="price">
            <view class="unit">￥</view>
            <view class="num">{{ product.price }}</view>
          </view>
          <!-- 垂直布局时显示销量 -->
          <view class="sales" v-if="layout === 'vertical'">已售{{ product.sales }}</view>
        </view>
        <view class="tags">
          <view>佣金￥{{ parseFloat(product.price * product.commission_money_rate / 100).toFixed(2) }}</view>
          <view>占比{{ product.commission_money_rate }}%</view>
        </view>
        <view class="action">
          <view class="btn del">
            <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250523/500c5efb1a531184746be1ea168b77d8.png"></image>
            <view>删除</view>
          </view>
          <view class="btn share">
            <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250522/a2384fa073c9fbb5183d56eb3452d91e.png"></image>
            <view>分享</view>
          </view>
          <!-- 水平布局时显示销量 -->
          <view class="sales" v-if="layout === 'horizontal'">已售22</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { computed, reactive } from 'vue';
const emit = defineEmits(['detail', 'del', 'share', 'select'])
const props = defineProps({
  layout: {
    type: String,
    default: 'vertical',
    validator: (value) => ['vertical', 'horizontal'].includes(value)
  },
  product: {
    type: Object,
    default() {},
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
  
});

const state = reactive({
  shopId: '',
  userId: '',
})

const userInfo = computed(() => sheep.$store('user').userInfo);
state.shopId = userInfo.value.cyq_store_id
state.userId = userInfo.value.id

const handleToDetail = () => {
  console.log(props.product, 'product==')
  const params = {
    shopid: state.shopId,
    user_id: state.userId,
    id: props.product.id,
    store_id: state.shopId
  }
  sheep.$router.go('/pages/goods/index', params )
}

const handleItemClick = () => {
  if (props.isEdit) {
    // In edit mode, emit select event
    emit('select', props.product.id);
  } else {
    // In normal mode, go to detail
    handleToDetail();
  }
}
</script>

<style lang='scss' scoped>
@import '../style/basic.scss';
@import '../style/product.scss';
</style>